<template>
	<view class='My'>
		<view class='topBlank'></view>
		<view class="section1">
			<view class="login" @click="onekeyLogin">
				<u-avatar :src="picture" size="60"></u-avatar>
				<text>{{userName}}</text>
			</view>
		</view>
		<view class="section2 lrb">
			<u-grid col="4" :border="false">
				<u-grid-item v-for="(v,i) in baseList" :key="i" @click="handleClick">
					<u-icon color="#C0C0C0" :name="v.name" :size="26"></u-icon>
					<text class="grid-text">{{v.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="section3 lrb">
			<u-cell-group>
				<u-cell title="最新消息" @click="click1" isLink>
					<text slot="value" class="u-slot-value">99</text>
				</u-cell>
				<u-cell title="安全保障" @click="click1" isLink></u-cell>
				<u-cell title="推荐有奖" @click="click1" isLink></u-cell>
				<u-cell title="流程说明" @click="click1" isLink></u-cell>
			</u-cell-group>
		</view>
		<view class="section4">
			<u-button type="primary" :plain="true" :hairline="true" text="退出当前登录" shape="circle"
				@click="quit"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		login,
		addUser
	} from "@/api/api.js"
	export default {
		onShow() {
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo) {
				this.userName = userInfo.phone
				this.loginState = true;
			}
		},
		data() {
			return {
				// #ifdef H5
				userName: '点击注册',
				// #endif
				// #ifndef H5
				userName: '请点击登录',
				// #endif
				picture: "/static/picture.jpg",
				loginState: false,
				baseList: [{
						name: 'file-text-fill',
						title: '订单'
					},
					{
						name: 'map-fill',
						title: '地址'
					},
					{
						name: 'rmb-circle-fill',
						title: '余额'
					},
					{
						name: 'chat-fill',
						title: '评价'
					},
				]
			};
		},
		methods: {
			async onekeyLogin() {
				if (this.loginState) return
				// #ifdef H5
				uni.navigateTo({
					url: '/pages-sub/bindPhone'
				})
				// #endif
				// #ifdef MP-WEIXIN
				// 此方法返回有注册需要的参数
				const {
					userInfo
				} = await uni.getUserProfile({
					desc: '用户详情', //必填
				})
				console.log('用户微信详情', userInfo);
				this.userName = userInfo.nickName;
				this.picture = userInfo.avatarUrl;
				// 获取access_token,有了access_token后可以调取微信其他开放接口
				const token = await uni.login({
					provider: 'weixin'
				})
				console.log('开放接口token', token);
				// 一键登录
				const res = await addUser({
					name: userInfo.openId,
					nick: userInfo.nickName,
					picture: userInfo.avatarUrl
				})
				console.log('后端返回注册参数', res);
				this.loginState = true;
				// #endif
				// uni.setStorage({
				// 	key: 'token',
				// 	data: res.token
				// })
				// console.log('token', res.token);
				if ('未绑定手机号') {
					uni.showModal({
						title: '提示',
						confirmText: '去完善',
						content: '请绑定手机号',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages-sub/bindPhone'
								})
							}
						}
					})
				}

			},
			click1(name) {
				uni.showToast({
					icon: 'none',
					title: '服务异常'
				})
			},
			quit(name) {
				this.loginState = false
				this.userName = '请点击登录';
				this.picture = '';
				uni.removeStorageSync('userInfo')
			},
			handleClick(){
				uni.navigateTo({
					url: '/pages-sub/map'
				})
			}
		}
	}
</script>

<style lang="scss">
	.My {
		width: 100%;
		overflow: hidden;
	}

	.lrb {
		border-bottom: 20rpx solid #f5f5f5;
		padding: 20rpx;
	}

	.section1 {
		padding-top: 20rpx;
		width: 120%;
		height: 150px;
		// background: #29ab37;
		background: linear-gradient(to bottom, #004e5f, #00809d, #a8e6cf);
		position: relative;
		left: -10%;
		border-bottom-left-radius: 45%;
		border-bottom-right-radius: 45%;
		display: flex;

		.login {
			margin: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #fff;
		}
	}

	.section2 {
		font-size: 28rpx;
		color: gray;
	}

	.section3 {
		margin-top: 40rpx;
		padding-top: 0rpx;

		.u-slot-value {
			padding: 14rpx 10rpx;
			line-height: 10rpx;
			background-color: #fd615f;
			border-radius: 50rpx;
			color: #fff;
			font-size: 16rpx;
		}
	}

	.section4 {
		margin: 40rpx 20rpx;
	}
</style>